<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{personinfo.personname}}</block>
		</cu-custom>
		<view @click="triggerCollapse(item)" v-for="(item,index) in details" v-bind:key="index" class="optons-list bg-white solid-bottom">
			<view class="optons-item arrow">
				<view class="content">
					<!-- <text class="cuIcon-warn text-green"></text> -->
					<text class="text-grey">{{item.title}}</text>
				</view>
				<view class="action">
					<text class="text-grey">{{item.time.length}}次</text>
					<text :class="item.open?'cuIcon-fold':'cuIcon-unfold'" style="padding-left: 25upx;"></text>
				</view>
			</view>
			<view @click.stop="" v-if="item.open" v-for="(item2,index2) in item.time" v-bind:key="index2" class="optons-item-2 solid-bottom">
				<view class="content">
					<text class="text-grey" v-html="item.id == 'leave'?item2.relationappr:item2.datat"></text>
					<!-- <text class="text-grey">{{item.id == 'leave'?item2.relationappr:item2.datat}}</text> -->
				</view>
				<view class="content">
					<text class="text-grey">{{item.id == 'leave'?'':minuteToHour(200)}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let _self = null
	export default {
		data() {
			return {
				personinfo: {},
				details: []
			}
		},
		onLoad(options) {
			_self = this
			if (typeof(options.data) != 'undefined') {
				_self.personinfo = JSON.parse(options.data)
			}
			//test
			// else {
			// 	_self.personinfo.perid = '59CIsHxHfbMtMCipi2w'
			// 	_self.personinfo.personname = '测试'
			// 	_self.personinfo.date = '2019-12'
			// }
			this.getData()
		},
		methods: {
			triggerCollapse(item) {
				if (item.time.length == 0) return
				item.open = !item.open
			},
			minuteToHour(min) {
				var hours = parseInt(min / 60 % 24);
				var minute = parseInt(min % 60);
				let time = ''
				if (hours > 0) {
					time = hours + "小时" + minute + "分钟";
				} else {
					time = minute + "分钟";
				}
				return time
			},
			// "59CIsHxHfbMtMCipi2w"
			getData() {
				uni.showLoading({
					title:'加载中'
				})
				uni.request({
					url: _self.$constant.BASEURL + _self.$constant.GET_MONTHY_STATISTICS_PERSON_DETAIL,
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						username: getApp().globalData.username,
						token: getApp().globalData.token,
						orgcode: getApp().globalData.orgcode,
						perid: _self.personinfo.perid,
						ymonth: _self.personinfo.date,
					},
					complete() {
						uni.hideLoading()
					},
					success: (res) => {
						//跳转到登陆页面	
						// console.log(res.data.data)
						let result = res.data.data
						if (res.data.code == 0) {
							let data = [{
									id: 'attcount',
									title: '出勤',
									open: false,
									time: result.atttime
								},
								{
									id: 'late',
									title: '迟到',
									open: false,
									time: result.late
								},
								{
									id: 'leaveearly',
									title: '早退',
									open: false,
									time: result.leaveearly
								},
								{
									id: 'absenteeism',
									title: '旷工',
									open: false,
									time: result.absenteeism
								},
								{
									id: 'leave',
									title: '请假',
									open: false,
									time: result.leaves
								},
							]
							_self.details = data
						}
					}
				});
			}
		}
	}
</script>

<style>
	.optons-list {
		display: flex;
		flex-direction: column;
	}

	.optons-list .optons-item {
		padding: 30upx 35upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.optons-item .content {
		font-size: 28upx;
	}

	.optons-list .optons-item-2 {
		padding: 25upx 35upx;
		background-color: #f1f1f1;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>
